<template>
  <div class="app">
    <div>
      <textarea style="width: 500px;height: 350px;margin-left: 20px; margin-top: 20px;" v-model="str"></textarea>
    </div>
    <div style="margin: 10px 0px 0px 40px">
      <el-button style="margin-left: 20px;margin-top: 20px;" size="mini" type="primary" @click="start">
        开始生成
      </el-button>
      <el-button style="margin-left: 20px;margin-top: 20px;" size="mini" type="primary" @click="clear">
        清空
      </el-button>
      <el-button id="btn" size="mini" type="primary" @click="copyAndClear('1')">
        一键复制
      </el-button>
      <el-button id="btn" size="mini" type="primary" @click="copyAndClear('2')">
        一键复制并清空
      </el-button>
    </div>

    <table class="pure-table">
      <thead>
      <th v-for="(item,index) in header">{{ item }}</th>
      </thead>
      <tr id="tranStr">
        <td v-for="(value,key) in bsa">{{ value }}</td>
      </tr>
    </table>

  </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
  data() {
    return {
      header: ['姓名', '出生日期', '身高', '职业', '学历', '学校', '年收入', '语音沟通', '兴趣爱好', '电话号码', '婚姻状况', '籍贯', '居住地址', '车房情况', '家庭情况', '自我评价', '感情经历', '是否接受推广(给客户表示不用更改)', '择偶需求', '是否接受离异'],
      bsa: null,
      str:''
      /* str: '【姓名】张泽凯\n' +
        '【出生年月】2000.2\n' +
        '【身高】178\n' +
        '【工作】县rwb\n' +
        '【学历】本科\n' +
        '【年收入】税后8w\n' +
        '【兴趣爱好】网球、滑雪\n' +
        '【电话号码】18091491315\n' +
        '【婚姻情况】未婚\n' +
        '【籍贯】宝鸡\n' +
        '【居住区域】宝鸡、西安\n' +
        '【有无房车】都有\n' +
        '【家庭情况】家庭富裕\n' +
        '【自我评价】偏瘦\n' +
        '【接受朋友圈露脸/不露脸推广】是\n' +
        ' 期待另一半：\n' +
        '【年龄区间】20-26\n' +
        '【身高区间】165以上\n' +
        '【学历要求】本科起步\n' +
        '【最看重对方】独生女' */
    }
  },

  /**
   *   浏览器操作 剪贴板有两种实现方式
   *    1、原生js实现，调用浏览器的clipboard API
   *    2、基于Vue项目的实现，需要引入相关依赖：  "clipboard": "2.0.8",
   */
  // https://blog.csdn.net/m0_52477297/article/details/131283314

  methods: {
    clear() {
      // 重置输入域和识别结果
      this.str = ''
      this.bsa = ''
    },
    copyAndClear(id) {
      console.info('aaaaaaa', id)
      let that = this
      let clipboard = new Clipboard('#btn', {
        text(trigger) {
          console.log(trigger)
          //写入到剪贴板的字符串
          console.info(document.getElementById('tranStr').innerText == '')
          return document.getElementById('tranStr').innerText
        }
      })
      // 复制成功
      clipboard.on('success', (e) => {
        this.$message({
          showClose: true,
          message: '复制成功',
          type: 'success'
        })
        console.log(e, '复制成功')
        clipboard.destroy()
        if (id === '2') {
          // 重置输入域和识别结果
          that.str = ''
          that.bsa = ''
        }
      })
      // //复制失败
      clipboard.on('error', (e) => {
        console.log(e, '复制失败')
        clipboard.destroy()
      })
    },
    start() {
      var _this = this
      if (_this.str == undefined || _this.str == '') {
        this.$message({
          showClose: true,
          message: '请输入识别文本',
          type: 'warning'
        })
        return
      }
      var infoObj = new Object()
      var infos = _this.str.split('\n')

      //// 开始合并单元格
      var st1 = ''
      var st2 = ''
      var st3 = ''
      var st4 = ''

      for (var i = 0; i < infos.length; i++) {
        var item = infos[i].trim()
        // 判断每一项是否合规： 包含【】，且截取后数量=2
        var num = item.indexOf('】')

        if (num > 0 && item.split('】').length == 2) {
          //console.info(item.substr(1, num - 1) + ':' + item.substr(num + 1))
          // 1、提取需要合并的单元格的key，并缓存对应的value值
          let key = item.substr(1, num - 1)
          let value = item.substr(num + 1)
          if (key === '年龄区间') {
            st1 = value + '/'
          } else if (key === '身高区间') {
            st2 = value + '/'
          } else if (key === '学历要求') {
            st3 = value + '/'
          } else if (key === '最看重对方') {
            st4 = value
          } else {
            //2、处理非合并的单元格
            //2.1、处理value无值的情况
            if (value === undefined) {
              infoObj[key] = ''
            } else {
              //2.2、
              infoObj[key] = value
            }
          }
        }
      }

      infoObj['择偶需求'] = st1 + st2 + st3 + st4
      console.info(infoObj)

      // 重新组装数据，处理表头映射、表头空值填充
      let obj = new Object()
      // 遍历header
      for (var i = 0; i < _this.header.length; i++) {
        // 模板表头
        var header = _this.header[i]
        // 模板表头的映射 -->  解析数据
        if (header === '出生日期') {
          obj[header] = infoObj['出生年月']
        } else if (header === '职业') {
          obj[header] = infoObj['工作']
        } else if (header === '居住地址') {
          obj[header] = infoObj['居住区域']
        } else if (header === '婚姻状况') {
          obj[header] = infoObj['婚姻情况']
        } else if (header === '车房情况') {
          obj[header] = infoObj['有无房车']
        } else if (header === '是否接受推广(给客户表示不用更改)') {
          obj[header] = infoObj['接受朋友圈露脸/不露脸推广']
        } else {
          obj[_this.header[i]] = infoObj[_this.header[i]]
        }
        /* if (infoObj[header] === undefined || infoObj[header] == null) {
          // 转换的数据和表头不匹配时，为表头填充空数据
          obj[header] = ''
        } else {
          // 模板表头的映射 -->  解析数据
          if (header === '出生日期') {
            obj[header] = infoObj['出生年月']
          } else if (header === '工作') {
            obj[header] = infoObj['职业']
          } else if (header === '居住地址') {
            obj[header] = infoObj['居住区域']
          } else if (header === '有无房车') {
            obj[header] = infoObj['车房情况']
          } else if (header === '接受朋友圈露脸/不露脸推广') {
            obj[header] = infoObj['是否接受推广(给客户表示不用更改)']
          } else {
            obj[_this.header[i]] = infoObj[_this.header[i]]
          }
        } */
        /*  var bb = _this.str.replaceAll('\n', '",')
         bb = bb.replaceAll('【', '"')
         bb = bb.replaceAll('】', '":"')
         console.info(bb) */
      }
      _this.bsa = obj
      console.info(obj)
    }
  }
}
</script>
<style>
/*https://juejin.cn/post/7182506193556865061*/
/*给table的单元格新增class属性： cell-class-name。属性不生效时，去掉： scoped 属性 */
.cellName .cell {
  /*color: red;*/
  /*white-space: pre-line;*/
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 10px 0px 0px 40px;
  text-align: center;
  font-size: 18px;
}

td, th {
  padding: 0;
}

.pure-table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
}

.pure-table caption {
  color: #000;
  font: italic 85%/1 arial, sans-serif;
  padding: 1em 0;
  text-align: center;
}

.pure-table td, .pure-table th {
  border-left: 1px solid #cbcbcb;
  border-width: 0 0 0 1px;
  font-size: 12px;
  margin: 0;
  overflow: visible;
  padding: .5em 1em;
}

.pure-table thead {
  background-color: #e0e0e0;
  color: #000;
  text-align: left;
  vertical-align: bottom;
}

.pure-table td {
  background-color: transparent;
}
</style>
